<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="slider.css">
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
</head>

<body>
    <div class="nav_1"></div>
    <div class="nav_2">
        <div class="wrap_nav2">
            <ul class="nav">
                <li class="nav_content">
                    <a href="#"><em class="em1">推荐</em></a>
                </li>
                <li class="nav_content">
                    <a href="#"><em class="em2">排行榜</em></a>
                </li>
                <li class="nav_content">
                    <a href="#"><em class="em3">歌单</em></a>
                </li>
                <li class="nav_content">
                    <a href=""><em class="em4">主播电台</em></a>
                </li>
                <li class="nav_content">
                    <a href=""><em class="em5">歌手</em></a>
                </li>
                <li class="nav_content">
                    <a href=""><em class="em6">新碟上架</em></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="change-text">
        <div class="index-banner" style="background-image: url(''); "><!--写渐变背景图-->
            <div class="banner-box">
                <div class="wrap">
                    <div class="wrap-banner"">
                        <div class=" ban-img">
                        <a href="#">
                            <img src="" alt="">
                        </a>
                    </div>
                    <a href="#" class="left">&lt</a><!--左右两边的翻页-->
                    <a href="#" class="right">&gt</a>
                    <div class="dot-buttom">
                        <span><a href="#" class="pg-color" data-index="0"></a></span>
                        <span><a href="#" data-index="1"></a></span>
                        <span><a href="#" data-index="2"></a></span>
                        <span><a href="#" data-index="3"></a></span>
                        <span><a href="#" data-index="4"></a></span>
                        <span><a href="#" data-index="5"></a></span>
                        <span><a href="#" data-index="6"></a></span>
                    </div> <!--最底部的小点-->
                </div>
                <div class="download-client">
                    <a href="">
                        <img src="/imgs/download.png" alt="">
                    </a>
                </div><!--右边的电脑端下载-->
            </div>
        </div>
    </div>
    </div>
    <script>
        // const content = document.querySelector('.change-text')
        // function updateContent() {
        //     const hash = location.hash.slice(1)
        //     if (hash) {
        //         content.innerHTML = ''
        //     } else {
        //         content.innerHTML = ''
        //     }
        // }
        // window.addEventListener('hashchange', updateContent)
        // window.addEventListener('load', updateContent)
        axios.defaults.baseURL = ' http://j48zhu.natappfree.cc'
        async function getSlider() {
            try {
                const response = await axios.get('/home/head')
                return response.data.data
            } catch (error) {
                console.log(error)
            }
        }
        async function useData() {
            let data = await getSlider()
            console.log(data)
            const bgcImg = document.querySelector('.index-banner')
            const sliderImg = document.querySelector('.ban-img img')
            const sliderData = [
                { url: data[0] },
                { url: data[1] },
                { url: data[2] },
                { url: data[3] },
                { url: data[4] },
                { url: data[5] },
                { url: data[6] },
            ]
            let i = 0
            const left = document.querySelector('.left')
            left.addEventListener('click', function () {
                i--
                if (i < 0) {
                    i = 6
                }
                sliderImg.src = sliderData[i].url
                bgcImg.style.backgroundImage = `url('${sliderData[i].url}')`
                document.querySelector('.dot-buttom .pg-color').classList.remove('pg-color')
                document.querySelector(`a[data-index="${i}"]`).classList.add('pg-color')
            })
            const right = document.querySelector('.right')
            right.addEventListener('click', function () {
                i++
                if (i > 6) {
                    i = 0
                }
                sliderImg.src = sliderData[i].url
                bgcImg.style.backgroundImage = `url('${sliderData[i].url}')`
                document.querySelector('.dot-buttom .pg-color').classList.remove('pg-color')
                document.querySelector(`a[data-index="${i}"]`).classList.add('pg-color')
            })
            // 将底部圆点和图片创建联系
            const buttomDot = document.querySelectorAll('.dot-buttom span a')
            buttomDot.forEach((item, index) => {
                buttomDot[index].addEventListener('click', function () {
                    sliderImg.src = sliderData[index].url
                    bgcImg.style.backgroundImage = `url('${sliderData[index].url}')`
                    document.querySelector('.dot-buttom .pg-color').classList.remove('pg-color')
                    document.querySelector(`a[data-index="${index}"]`).classList.add('pg-color')
                    i = index
                })
            })
            // bgcImg.style.backgroundImage = `url('${sliderData[0].url}')`
            //背景图片和轮播图创建联系
            setInterval(() => {
                right.click()
            }, 3000)
        }
        useData()
    </script>
</body>

</html>